<template>
  <div id="headImg">
    <el-page-header @back="goBack" content="登记页面"> </el-page-header>
    <div id="myPhoto">
      <div class="viewPhoto" @click="monidianji">
        <i class="el-icon-plus"></i>
        <img
          :src="imageSave"
          alt=""
          id="portrait"
          style="width: 350px; height: 200px"
        />
      </div>
      <p>
        提示：请选择本地图片上传，支持各种图片格式<br />
        上方选择图片
      </p>
      <div class="myText">
        <el-form
          :model="numberValidateForm"
          ref="numberValidateForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="犬证编号"
            prop="etcnum"
            :rules="[{ required: true, message: '犬证编号不能为空' }]"
          >
            <el-input
              type="etcnum"
              v-model.number="numberValidateForm.etcnum"
              autocomplete="off"
            ></el-input>
          </el-form-item>

        </el-form>
      </div>

      <div class="listBox">
        <input type="file" id="saveImage" name="myphoto" />
      </div>

      <div class="save">
        <el-button type="danger" size="small" @click="imageSubmit"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      numberValidateForm: {
        etcnum: "",
        
      },
      imageSave:
        "https://poppyflower.oss-cn-chengdu.aliyuncs.com/2021/05/25/619b6ff3-5b03-4bb3-a721-885b7172cad8", //图片路径
      uploadDate: "上传时间：", //上传时间
      name: this.$route.params.name,
      uid: this.$route.params.uid,
    };
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "/police/business_handling/pet_syndrome_grant",
        name: "犬证登记",
        params: {},
      });
    },
    monidianji() {
      document.getElementById("saveImage").click();
    },
    yulan() {
      document.getElementById("saveImage").onchange = function () {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function () {
          document.getElementById("portrait").src = fr.result;
        };
        fr.readAsDataURL(imgFile);
      };
    },
    imageSubmit() {
      console.log(this.numberValidateForm.etcnum);
      console.log(this.numberValidateForm.dognum);
      console.log(this.imageSave);
      console.log(this.name);
      console.log(this.uid);
      axios
        .get("http://localhost:3031/petBrandLogin", {
          params: {
            etcnum: this.numberValidateForm.etcnum,
            url: this.imageSave,
            name: this.name,
            uid: this.uid,
          },
        })
        .then((resp) => {
          //this.status=1
          this.$router.push({
            path: "/police/business_handling/pet_syndrome_grant",
            name: "犬证登记",
            params: {
              
            },
          });
        });
    },
  },
  mounted() {
    this.yulan(); //预览图片
  },
  computed: {},
};
</script>
<style scoped>
#headImg {
  margin-left: 50px;
}
.viewPhoto {
  border: 1px rgba(99, 199, 210, 0.79) dashed;
  width: 350px;
  height: 200px;
}
.myText {
  width: 350px;
}
#saveImage {
  display: none;
}
.save {
  margin: 30px auto;
}
.viewPhoto {
  position: relative;
}
.el-icon-plus {
  font-size: 50px;
  color: rgba(99, 199, 210, 0.79);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  text-align: center;
}
</style>
